<!--
 * @Description: 任务状态
 -->
<template>
  <div>
    <van-tabs color="#007AFF" @click="onClick">
      <van-tab
        v-for="tabItem in tabList"
        :key="tabItem.name"
        :title="tabItem.title"
        :name="tabItem.name"
      >
        <template v-if="listTotal > 0">
          <task-list :taskList='taskList'></task-list>
        </template>
        <van-empty v-else-if="listTotal == 0" description="暂无任务～" />
        <van-empty v-else-if="listTotal == -1" image="error" description="获取记录出错" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import taskList from '@/components/taskList'
import { checkTaskRecord } from '@/api/check'
import { Toast } from 'vant'
export default {
  components: {
    'task-list': taskList
  },
  data () {
    return {
      tabList: [
        {
          name: 1,
          title: '已抢包'
        }, {
          name: 2,
          title: '已完成'
        }, {
          name: 3,
          title: '已收款'
        }
      ],
      taskList: [],
      listTotal: null
    }
  },
  methods: {
    getTaskRecord (pageNum, pageSize, taskStatus) {
      const $this = this
      Toast.loading({
        forbidClick: true,
        duration: 0
      })
      checkTaskRecord(0, 50, taskStatus).then(res => {
        console.log('checkTaskRecord', res)
        Toast.clear()
        $this.listTotal = res.data.data.total
        $this.taskList = res.data.data.list
      }).catch(() => {
        Toast.clear()
        $this.listTotal = -1
      })
    },
    onClick (name, title) {
      console.log('taskStatus', name)
      this.getTaskRecord(1, 50, name)
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created () {
    this.getTaskRecord(1, 50, 1)
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */

</style>
